<template>
    <div class="goods-page">
        <bread />
        <div class="goods-content">
            <router-link to="/cart">cart</router-link>
            <div class="sort-line">
                Sort by: <a class="sort" href="javascript:void(0);">default</a>
                Price: <i class="el-icon-arrow-up"></i>
            </div>
            <div class="goods-box">
                <div class="right-goods-list">
                    <div class="goods-list">
                        <dl
                            v-for="(item, index) in productList"
                            :key="index"
                            class="good-item"
                        >
                            <dt class="good-img"><img v-lazy="item.productImg" alt="good-image"/></dt>
                            <dd class="good-intr">
                                <p class="good-name">{{item.productName}}</p>
                                <p class="good-price">{{item.productPrice}}</p>
                            </dd>
                            <dd class=""><a href="javascript:void(0);" class="add-btn">加入购物车</a></dd>
                        </dl>
                    </div>

                    <div
                        style="text-align: center"
                        v-infinite-scroll="loadMore"
                        infinite-scroll-disabled="busy"
                        infinite-scroll-distance="10"
                    ><img :src="require('@assets/icons/loading-bars.svg')" alt="load-more"/></div>
                </div>
                <div class="left-price">
                    <p class="price-title">PRICE</p>
                    <ul class="price-list">
                        <li
                            v-for="(item, index) in priceLevel"
                            :key="index"
                            class="price-item"
                            @click="cutPriceLevel(item)"
                        >
                            <a
                                href="javascript:void(0);"
                                :class="['sort-price', {'active': currentPriceLevel === item}]"
                            >{{item}}</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import Bread from '@components/Bread/index.vue';
    import { GoodApis } from '@apis/index.js';
    export default {
        name: 'goods-page',
        data(){
            return {
                priceLevel: ['all', '0-100', '100-500', '500-1500', '1500-3000', '3000-6000'],
                currentPriceLevel: 'all',
                productList: [],
                page: 1,
                pageSize: 12,
                sort: true,
                busy: true
            }
        },

        created() {
            this.addCurrPage2Vuex();
        },

        mounted() {
            // this.requestGoods(false);
        },

        methods: {
            requestGoods(flag = false) {
                let params = {
                    sort: this.sort ? 1 : -1,
                    page: this.page,
                    pageSize: this.pageSize,
                    pricelevel: this.currentPriceLevel
                };
                let options = Object.assign(GoodApis.goodList, {params, loading: !flag});
                this._req.ajax(options).then(res => {
                    if (flag) {
                        this.productList = this.productList.concat(res.list);
                    } else {
                        this.productList = res.list;
                    }
                    this.busy = res.count < this.pageSize;
                }, err => {
                    console.log(err)
                })
            },

            loadMore() {
                this.busy = true;
                this.page += 1;
                setTimeout(() => {
                    this.requestGoods(true);
                }, 1000);
            },

            cutPriceLevel(pricelevel) {
                this.currentPriceLevel = pricelevel;
                this.page = 1;
                this.requestGoods(false);
            }
        },

        components: {
            Bread
        }
    }
</script>

<style lang="scss">
    @import "./scss/index.scss";
</style>
